<template>
  <div class="money">
    <!-- 修改部分 -->
    <div class="ipt">
      <span>姓名:</span>
      <el-input v-model="upname" placeholder="请输入姓名" class="size"></el-input>
      <span>修改项：</span>
      <el-select v-model="upval" placeholder="请选择修改项" class="size">
        <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="index"></el-option>
      </el-select>
      <span>修改内容</span>
      <el-input v-model="updata" placeholder="请输入修改内容" class="size"></el-input>
      <el-button type="primary" @click="upData()">确定</el-button>
      <el-button @click="cancelUP()">重置</el-button>
    </div>
    <!-- 员工薪资数据部分 -->
    <el-table :data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%" max-height='500'>
      <el-table-column label="ID" prop="id" align="center">
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column label="工号" prop="worknum" align="center">
      </el-table-column>
      <el-table-column label="职位" prop="job" align="center">
      </el-table-column>
      <el-table-column label="考勤天数" align="center" prop="worknum">
        <!-- {{checkdate}} -->
      </el-table-column>
      <el-table-column label="上班天数" align="center">
        <template slot-scope="scope">
          <span>{{teacher1[scope.$index].worknum - teacher1[scope.$index].holy}}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假天数" align="center" prop="holy">
      </el-table-column>
      <el-table-column label="缺勤情况" prop="absence" align="center">
        <template slot-scope="scope">
          <span>{{Number(teacher1[scope.$index].holy) + Number(teacher1[scope.$index].late)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="迟到情况" prop="late" align="center">
      </el-table-column>
      <el-table-column label="奖金/提成" prop="bonus" align="center">
        <template slot-scope="scope">
          <span>{{Number(teacher1[scope.$index].money) - Number(8000)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="固定工资" align="center">
        {{8000}}
      </el-table-column>
      <el-table-column label="税务" align="center">
        {{90}}
      </el-table-column>
      <el-table-column label="实发工资" prop="money" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40,50]" layout="total, sizes, prev, pager, next, jumper"
        :total="teacher1.length">
      </el-pagination>
    </div>
    <!-- <button @click="ddd">1111</button> -->
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //员工薪资数据
        search: '',
        //修改选项
        options: [{
            value: '选项1',
            label: '职位'
          },
          {
            value: '选项2',
            label: '请假天数'
          },
          {
            value: '选项3',
            label: '缺勤情况'
          },
          {
            value: '选项4',
            label: '迟到情况'
          },
          {
            value: '选项5',
            label: '奖金/提成'
          }
        ],
        //修改数据
        upname: '',
        upval: '',
        updata: '',
        // 分页的参数
        // total: this.total,
        currentPage: 1, //当前页数
        pageSize: 10, // 每页显示条数
        indexsss: '',
        teacher1: []
      }
    },
    computed: {
      tables() {
        const upname = this.upname;
        if (upname) {
          return this.teacher1.filter(data => {
            return Object.keys(data).some(key => {
              return String(data[key]).toLowerCase().indexOf(upname) > -1

            })
          })
        }
        return this.teacher1
      }
    },
    updated() {
      this.con();
    },
    mounted() {

    },
    methods: {
      num() {

      },
      con() {
        this.indexsss = this.tables[0].id
        console.log(this.indexsss);
      },
      //修改
      upData(){
        var _this = this
        var updatapath = 'https//:10.1.8.189:3000/user/api/update';
        this.$axios.post(updatapath,{
          // if(this.upval = 0){
          //   job = this.updata
          // }else if(this.upval = 1){

          // }
          name:'sss',
          sex: '女',
          intime:'2012-2-3',
          phone: '1231241231',
          id: '1'
        }).then(res => {
          console.log(res)
        })
      },
      //重置修改
      cancelUP() {
        this.upname = '';
        this.upval = '';
        this.updata = '';
      },
      //分页方法
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        // console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        console.log(`当前页: ${val}`);
      }
    },
    beforeMount() {
      //调取数据
      getData1: {
        this.$axios({
          method: "get",
          url: "http://10.1.8.189:3000/api/user/all",
        }).then((res) => {
          this.teacher1 = res.data
          console.log(this.teacher1);
        })
      };
    }
  }
</script>

<style scoped="scoped">
  .ipt {
    margin-top: 15px;
    float: left;
    margin: 15px 0px 0px 15px;
  }

  .size {
    width: 200px;
    margin-right: 15px;
  }
</style>